﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>METRO FLASH CARDS</title>
    <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="HomePage" class="MainPage" style="display: inherit">
        <div class="PageTitle">METRO FLASH CARDS</div>
        <div class="PageDescription">Play, learn, and customize you own cards..!</div>
        <div class="Content">
            <div id="EditCards">
                <span class="Label">SETTINGS</span>
            </div>
            <div id="About"><span class="Label">ABOUT</span></div>
        </div>
        <div class="ClearAlignment"></div>
        <div id="Play"><span class="Label">PLAY CARDS</span></div>
    </div>
    <div id="AboutPage" class="MainPage">
        <div class="PageTitle">METRO FLASH CARDS</div>
        <div class="PageDescription">Play, learn, and customize you own cards..!</div>
        <div class="Content">
            <h2>About</h2>
            <p>
                Metro Flash Cards was developed over the weekend for fun using HTML5 and JavaScript
                to help me and my wife quickly learn German.
                <br />
                The source code is avilable on <a href="http://metroflashcards.codeplex.com/" target="_blank">
                    CodePlex</a>.
            </p>
            <p>
                Enjoy..!
                <br />
                Bandar - <a href="http://blogs.msdn.com/balsharfi" target="_blank">http://blogs.msdn.com/balsharfi
                </a>
            </p>
            <div class="ButtonsContainer">
                <button id="BackFromAbout">Back</button>
            </div>
        </div>
    </div>
    <div id="SettingsPage" class="MainPage">
        <div class="PageTitle">METRO FLASH CARDS</div>
        <div class="PageDescription">Play, learn, and customize you own cards..!</div>
        <div>
            <h2>Settings </h2>
            <div class="SettingsContent">
                <div class="QuestionDiv">
                    Question:
                    <input id="Question0" type="text" class="TextInputBox" />
                </div>
                <div class="AnswerDiv">
                    Answer:
                    <input id="Answer0" type="text" class="TextInputBox" />
                </div>
                <div class="ClearAlignment"></div>
                <div class="QuestionDiv">
                    Question:
                    <input id="Question1" type="text" class="TextInputBox" />
                </div>
                <div class="AnswerDiv">
                    Answer:
                    <input id="Answer1" type="text" class="TextInputBox" />
                </div>
                <div class="ClearAlignment"></div>
                <div class="QuestionDiv">
                    Question:
                    <input id="Question2" type="text" class="TextInputBox" />
                </div>
                <div class="AnswerDiv">
                    Answer:
                    <input id="Answer2" type="text" class="TextInputBox" />
                </div>
                <div class="ClearAlignment"></div>
                <div class="QuestionDiv">
                    Question:
                    <input id="Question3" type="text" class="TextInputBox" />
                </div>
                <div class="AnswerDiv">
                    Answer:
                    <input id="Answer3" type="text" class="TextInputBox" />
                </div>
                <div class="ClearAlignment"></div>
                <div class="QuestionDiv">
                    Question:
                    <input id="Question4" type="text" class="TextInputBox" />
                </div>
                <div class="AnswerDiv">
                    Answer:
                    <input id="Answer4" type="text" class="TextInputBox" />
                </div>
                <div class="ClearAlignment"></div>
                <div class="QuestionDiv">
                    Question:
                    <input id="Question5" type="text" class="TextInputBox" />
                </div>
                <div class="AnswerDiv">
                    Answer:
                    <input id="Answer5" type="text" class="TextInputBox" />
                </div>
                <div class="ClearAlignment"></div>
                <div class="QuestionDiv">
                    Question:
                    <input id="Question6" type="text" class="TextInputBox" />
                </div>
                <div class="AnswerDiv">
                    Answer:
                    <input id="Answer6" type="text" class="TextInputBox" />
                </div>
                <div class="ClearAlignment"></div>
                <div class="QuestionDiv">
                    Question:
                    <input id="Question7" type="text" class="TextInputBox" />
                </div>
                <div class="AnswerDiv">
                    Answer:
                    <input id="Answer7" type="text" class="TextInputBox" />
                </div>
                <div class="ClearAlignment"></div>
                <div class="QuestionDiv">
                    Question:
                    <input id="Question8" type="text" class="TextInputBox" />
                </div>
                <div class="AnswerDiv">
                    Answer:
                    <input id="Answer8" type="text" class="TextInputBox" />
                </div>
                <div class="ClearAlignment"></div>
                <div class="QuestionDiv">
                    Question:
                    <input id="Question9" type="text" class="TextInputBox" />
                </div>
                <div class="AnswerDiv">
                    Answer:
                    <input id="Answer9" type="text" class="TextInputBox" />
                </div>
            </div>
            <div class="ButtonsContainer">
                <button id="ClearAllFields">Clear Fields</button>
                <button id="BackFromSettings">Cancel Changes</button>
                <button id="SaveSettings">Save Changes</button>
            </div>
        </div>
    </div>
    <div id="GamePage" class="MainPage">
        <div class="PageTitle">METRO FLASH CARDS</div>
        <div class="PageDescription">Play, learn, and customize you own cards..!</div>
        <div class="Content">
            <h2>Game Play</h2><br />
            <div id="GameBoard">
            </div>
            <div class="ButtonsContainer">
                <button id="FlipCard">Flip Card</button>
                <button id="NextCard">Next Card</button>
                <button id="BackFromGame">Leave Game Play</button>
            </div>
        </div>
    </div>
</body>
</html>
